<template >
  <div>
    <el-form ref="menuForm" :model="formData" label-width="80px" label-position="right" size="mini">
      <el-row>
        <el-col :span="10">
          <el-form-item label="菜单名称:" prop="Name">
            <el-input v-model="formData.Name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="代号:" prop="Code">
            <el-input v-model="codeComputed"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="图标:" prop="Icon">
            <el-input v-model="formData.Icon"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="序号:" prop="Order">
            <el-input v-model="formData.Order"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="描述:" prop="Description">
            <el-input v-model="formData.Description"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="上级菜单:" prop="ParentId">
            <treeselect v-model="formData.ParentId" :multiple="false" :options="menuTree" :normalizer="normalizer"
              placeholder="" :show-count="true" :disable-branch-nodes="false" clearable :defaultExpandLevel="1" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="菜单路径:" prop="Url">
            <el-input v-model="formData.Url"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="备注:" prop="Remark">
            <el-input type="textarea" maxlength="30" show-word-limit v-model="formData.Remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item>
            <el-button type="primary" @click="saveFormData">立即创建</el-button>
            <el-button @click="closeForm(false)">取消</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  components: { Treeselect },
  props: {
    // 上级菜单下拉框
    menuTree: {
      type: Array,
      // default: function () { return [] }
      default: () => []// es6 写法
    },
    // 表单数据
    formData: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
    }
  },
  methods: {
    saveFormData() {
      const formData = {};
      for (var key in this.formData) {
        if (key === 'ParentId' && this.formData[key] === null) {
          this.$set(formData, key, 0);
          continue;
        }
        this.$set(formData, key, this.formData[key]);
      }
      this.$api.MenuApi.SaveMenuForm(formData).then(res => {
        this.closeForm(true);
        this.$refs.menuForm.resetFields();
      })
    },
    closeForm(val) {
      const tag = val;
      this.$emit('callback', tag);
    },
    // 格式化下拉列表
    normalizer(node) {
      const item = { id: '', label: '', children: [] };
      item.id = node.Id;
      item.label = node.Name;
      if (node.Children != null) {
        item.children = node.Children;
        return item;
      } else {
        const { children, ...newItem } = item;
        return newItem;
      }
    }

  },
  computed: {
    codeComputed: {
      get: function () {
        return this.formData.Code;
      },
      set: function (val) {
        this.formData.Code = val.toUpperCase();
      }
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .vue-treeselect__control {
  height: 28px;
  font-size: 12px;
}
/deep/ .vue-treeselect__single-value {
  line-height: 28px;
}
</style>
